<template>
  <div
    id="searchRes"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false"
  >
    <section v-if="resData.length != 0">
      <!-- 共搜索到n条结果（已经取消） -->
      <radio_group01
        :radio_values="['按昨日抖音订单量', '按昨日抖音浏览量', '按昨日转化率']"
        v-model="KindName"
        class="tab01"
      />
      <table class="table">
        <thead>
          <tr>
            <th>商品</th>
            <th>昨日抖音订单量</th>
            <th>昨日抖音浏览量</th>
            <th>昨日转化率</th>
            <th>关联视频数</th>
            <th>关联直播数</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in resData" :key="'res' + index">
            <td>
              <div class="goodsBox" @click="toGoodsDetails(item.proId, '0')">
                <img :src="item.proLogo" class="preImg" />
                <div class="goodsRight">
                  <div class="top01">
                    <!-- 来源 -->
                    <div style="margin-right: 5px; margin-bottom: 4px">
                      <SourceIcon :sourceid="item.profrom" />
                    </div>
                    <el-tooltip
                      effect="light"
                      :content="item.proTitle"
                      :hide-after="2000"
                      placement="top"
                      popper-class="mytooltip"
                    >
                      <p class="overflowTextWl">{{ item.proTitle }}</p>
                    </el-tooltip>
                  </div>
                  <div class="bot01">
                    <p>
                      售价
                      <span class="riceText">￥{{ item.proPrice }}</span>
                    </p>
                    <p>
                      佣金率
                      <span class="rateText" v-if="item.commissionRate != ''">
                        {{
                        formatRate(item.commissionRate, 1)
                        }}
                      </span>
                      <span class="rateText" v-else>--</span>
                    </p>
                  </div>
                </div>
              </div>
            </td>
            <td>
              <p>{{ format_num(item.douYinVolume) }}</p>
              <p class="updating" v-if="item.status == 0">未更新</p>
            </td>
            <td>
              <p>{{ format_num(item.douYinViews) }}</p>
              <p class="updating" v-if="item.status == 0">未更新</p>
            </td>
            <td>{{ format_num(item.douYinConversionRatio) }}%</td>
            <td>{{ format_num(item.associatedVideo) }}</td>
            <td>{{ format_num(item.associatedlive) }}</td>
            <!-- <td>
              <span> {{ formatRate(item.conversionRatio, 1) }}</span>
            </td>-->
            <td>
              <div class="detailsBtnwl" @click="toGoodsDetails(item.proId, '0')">查看详情</div>
            </td>
          </tr>
        </tbody>
      </table>
    </section>
    <div
      v-loading="loading"
      v-if="!(resData.length < (page - 1) * 20) && !needBuy"
      class="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
    <p class="nothing" v-show="resData.length != 0 && resData.length < (page - 1) * 20">我是有底线的～</p>
    <div class="empty" v-show="!loading && resData.length == 0">
      <img src="@/assets/liu/zw.png" />
      <p>暂无数据</p>
    </div>
    <div class="toBuyWl" v-if="needBuy">
      当前为免费版会员，仅可查看100个结果，立即
      <span @click="toBuy">升级会员版本</span>，可查看更多数据
    </div>
  </div>
</template>

<script>
import SourceIcon from '@/component/SourceIcon.vue';
export default {
  name: 'searchRes',
  components: { SourceIcon },
  data() {
    return {
      KindName: '按昨日抖音订单量',
      cancel: null,
      resData: [],
      loading: true,
      busy: false,
      count: '',
      page: 1,
      needBuy: false
    };
  },
  computed: {},
  watch: {
    KindName: function (newVal, oldVal) {
      this.resData = [];
      this.page = 1;
      this.$store.commit('changeGoodsSearch_page', this.page);
      this.searchGoods();
    }
  },
  created() {
    this.searchGoods();
    // console.log(111)
    // console.log('数据',this.$store.state.goodsSerchOptions)
  },
  mounted() {},

  methods: {
    loadMore() {
      // console.log(1111);
      this.searchGoods();
    },
    searchGoods() {
      let that = this;
      that.loading = true;
      that.needBuy = false;
      that.busy = true;
      if (this.$store.state.goodsSerchOptions == null) {
        this.$router.push({
          path: `/talent_main/searchRoot`
        });
        return false;
      }
      let sort;
      switch (that.KindName) {
        case '按昨日抖音订单量':
          sort = 1;
          break;
        case '按昨日抖音浏览量':
          sort = 2;
          break;
        case '按昨日转化率':
          sort = 3;
          break;
      }
      this.$store.commit('changeGoodsSearch_sort', sort);
      that.$axios
        .post('/api/product/search', that.$store.state.goodsSerchOptions, {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel != null) {
              that.cancel();
            }
            that.cancel = c;
          })
        })
        .then(response => {
          that.loading = false;
          if (response.data.code == 0) {
            that.count = response.data.count;
            that.page += 1;
            that.$store.commit('changeGoodsSearch_page', that.page);
            that.resData = that.resData.concat(response.data.data);
            response.data.data.length < 20 ? (that.busy = true) : (that.busy = false);
          } else if (response.data.code == 1003) {
            that.busy = true;
            that.needBuy = true;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 跳商品详情
    toGoodsDetails(id, tabNo) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/${tabNo}`
      });
      window.open(router.href, '_blank');
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`
      });
      window.open(router.href, '_blank');
    }
  }
};
</script>
<style lang='less' scoped>
#searchRes {
  background: #fff;
  margin-left: 20px;
  margin-right: 20px;
  padding: 0 20px;
  margin-top: 20px;
  padding-top: 17px;
  position: relative;
  border-radius: 4px;
  height: fit-content;
  min-height: 100vh;
  .resNum {
    font-size: 14px;
    color: #888888;
    span {
      color: #1779ff;
      font-weight: 600;
    }
  }
  .tab01 {
    margin-top: 23px;
  }
  table {
    margin-top: 19px;
    text-align: center;
    box-sizing: border-box;
    thead {
      th {
        padding: 0 5px;
      }
      th:nth-child(1) {
        text-align: left;
        padding-left: 63px;
      }
      th:nth-child(7) {
        width: 12%;
      }
    }
    tbody {
      tr {
        height: 140px;
        td:nth-child(1) {
          width: 27%;
          text-align: left;
        }
        td:nth-child(2),
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6) {
          font-family: DINAlternate-Bold;
          font-size: 16px;
        }
        // 商品
        .goodsBox {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          .preImg {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            margin-left: 33px;
            border: 1px solid #e5e5e5;
          }
          .goodsRight {
            flex: 1;
            text-align: left;
            margin-left: 22px;
            .top01 {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              // img {
              //   width: 18px;
              //   height: 18px;
              // }
              p {
                font-size: 16px;
                color: #222222;
                font-weight: 600;
                // padding-left: 5px;
              }
            }
            .bot01 {
              margin-top: 16px;
              p {
                display: inline-block;
                font-size: 14px;
                color: #555555;
                padding-right: 24px;
              }
              .riceText {
                font-family: DINAlternate-Bold;
                font-size: 16px;
                color: #ea1b0b;
                padding-left: 6px;
              }
              .rateText {
                font-family: DINAlternate-Bold;
                font-size: 16px;
                color: #222222;
                padding-left: 8px;
              }
            }
          }
        }
        // 更新状态
        .updating {
          width: 62px;
          height: 22px;
          line-height: 22px;
          background-color: #f5f5f5;
          border-radius: 4px;
          font-size: 12px;
          color: #888888;
          text-align: center;
          margin: 0 auto;
          // border: solid 1px #e5e5e5;
        }
        .tdText01 {
          color: #222222;
          span {
            color: #1779ff;
          }
        }
      }
    }
  }
}
</style>